import React from "react";
import "../assets/css/home.css";
import { getIndexGoods } from "../util/request/api";
class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      goodslist: [],
    };
  }
  componentDidMount() {
    //组件一加载调取首页接口
    getIndexGoods()
    .then(res=>{
      console.log(res,'首页商品');
       if(res.code==200){
         this.setState({
           goodslist:res.list[0].content
         })
       }
    })
  
  }
  //封装一个跳转事件
  goOrder(id) {
    this.props.history.push("/order?id=" + id);
  }
  render() {
    const { goodslist } = this.state;
    return (
      <div className="home">
        <h1>首页</h1>
        <div>
          <ul>
            {goodslist.map((item) => {
              return (
                <li
                  onClick={this.goOrder.bind(this, item.id)}
                  key={item.id}
                  className="goodslist"
                >
                  <div className="imgUrl">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="goodsinfo">
                    <p>商品名称：{item.goodsname}</p>
                    <p>商品价格：{item.price}</p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
export default Home;
